<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <link th:href="@{/css/main/style.css}" rel="stylesheet" type="text/css"/>
    <div th:include="common.html"></div>
    <title>Title</title>
</head>
<body>
<body>
<div id="app" class="container-fluid">
    <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">功能组</button>
    <div id="demo" class="collapse">
        <button type="button" class="btn btn-success btn-round btn-sm"  style="margin-top: 10px"
                @click="openAdd">
            <span class="glyphicon glyphicon-plus">添加部门</span>
        </button>
        <button type="button" class="btn btn-danger btn-round btn-sm"  style="margin-top: 10px">
            <span class="glyphicon glyphicon-trash">批量删除部门</span>
        </button>
        <ul>
            <li><input type="text" class="form-control" style="width: 400px;height: 40px;margin-left: 400px" v-model="name" placeholder = '请输入部门名查询！'></li>
            <li><button class="btn btn-primary btn-round btn-sm" type="button" @click="selectData">
                <span class="glyphicon glyphicon-search">查询部门</span>
            </button></li></ul>
    </div>
    <a-table
            style="padding-top: 30px;margin: auto;width: 1000px;"
            row-Key="id"
            :columns="columns"
            :data-source="dataSources"
            :pagination="pagination"
            :row-Selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :custom-Row="customRow"
            bordered
    >
         <span slot="action" slot-scope="record" style="width: 100px">
            <a-button size="small" type="primary"  @click.stop="openUpdate(record)">编辑</a-button>

             <a-button size="small" type="danger"  @click.stop="deleteData(record.id)">删除</a-button>
        </span>
    </a-table>


    <!--bootstrap的模态对话框-->
    <div id="myModal" class="modal fade" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary" >
                    <h4 class="text-white">{{modalTitle}}</h4>
                    <button type="button" class="close text-white" data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <form role="form" id="addForm" class="form-horizontal">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label" style="padding-right: 0px" >部门名称：</label>
                            <div class="col-sm-10" style="padding-left: 0px">
                                <input type="text" class="form-control" id="name" name="name" v-model="name">
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-sm-2 control-label" style="padding-right: 0px" >联系电话：</label>
                            <div class="col-sm-10" style="padding-left: 0px">
                                <input class="form-control" id="phone" name="phone"  v-model="phone">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" style="padding-right: 0px" >上级部门：</label>
                            <div class="col-sm-10" style="padding-left: 0px">
                                <template>
                                    <a-tree-select
                                            id="orgTree"
                                            v-model="parentid"
                                            show-search
                                            style="width: 100%"
                                            tree-Node-Filter-Prop="title"
                                            :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
                                            placeholder="请选择"
                                            :tree-data="treeData"
                                            tree-data-simple-mode
                                            allow-clear
                                            tree-default-expand-all
                                            @change="orgTreeChange"
                                    >
                                    </a-tree-select>
                                </template>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" style="padding-right: 0px" >负责人：</label>
                            <div class="col-sm-10" style="padding-left: 0px">
                                <input class=" form-control" id="leader" name="leader"  v-model="leader">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" style="padding-right: 0px" >地址：</label>
                            <div class="col-sm-10" style="padding-left: 0px">
                                <input class="form-control" id="address" name="address"  v-model="address">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" style="padding-right: 0px" >备注：</label>
                            <div class="col-sm-10" style="padding-left: 0px">
                                <textarea class="form-control" id="beizhu" name="beizhu"  v-model="beizhu"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
                    <button type="button" class="btn btn-primary"  @click="operate()" >提交</button>
                </div>
            </div>

        </div>

    </div>
</div>
<script th:src="@{/myjs/org/main.js}"></script>
</body>
</html>
